---
title: はじめる
description: プロジェクトにYamada UIをインストールして使用する方法。
---

## フレームワークを選択する

::::card-group
:::card{title="Next.js (App)" href="/docs/get-started/frameworks/next-app"}

Next.jsの`app`ディレクトリにYamada UIをインストールして使用するためのガイド。

:::
:::card{title="Next.js (Pages)" href="/docs/get-started/frameworks/next-pages"}

Next.jsの`pages`ディレクトリにYamada UIをインストールして使用するためのガイド。

:::
:::card{title="Vite" href="/docs/get-started/frameworks/vite"}

Vite.jsのプロジェクトにYamada UIをインストールして使用するためのガイド。

:::
:::card{title="React Router" href="/docs/get-started/frameworks/react-router"}

React RouterのプロジェクトにYamada UIをインストールして使用するためのガイド。

:::
::::

## インストール

プロジェクトにYamada UIをインストールするには、[CLI](/docs/get-started/cli)でセットアップするか、[npm](https://www.npmjs.com)からインストールします。

:::warning
Yamada UIは、React 19のみ互換性があります。React 18以前を使用している場合は、React 19までアップグレードしてください。
:::

### CLI

::::steps

#### セットアップする

コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

:::code-group

```bash [pnpm]
pnpm dlx @yamada-ui/cli init
```

```bash [npm]
npx @yamada-ui/cli init
```

```bash [yarn]
yarn dlx @yamada-ui/cli init
```

```bash [bun]
bunx @yamada-ui/cli init
```

:::

#### パッケージをインストールする

アプリケーションに`@workspaces/ui`をインストールします。

:::code-group

```bash [pnpm]
pnpm add "@workspaces/ui@workspace:*"
```

```bash [npm]
npm install "@workspaces/ui@workspace:*"
```

```bash [yarn]
yarn add "@workspaces/ui@workspace:*"
```

```bash [bun]
bun add "@workspaces/ui@workspace:*"
```

:::

#### プロバイダーを追加する

インストール後、アプリケーションのルートに`UIProvider`を追加します。

```tsx {1,5,7}
import { UIProvider } from "@workspaces/ui"

const App = () => {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  )
}
```

#### コンポーネントを使用する

`UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。

```tsx {1,4}
import { Button } from "@workspaces/ui"

const App = () => {
  return <Button>Click me</Button>
}
```

これで、Yamada UIのセットアップは完了です！

::::

### npm

::::steps

#### パッケージをインストールする

Yamada UIは、`@yamada-ui/react`をインストールするだけで、すべてのコンポーネントやフックを使用できます。

:::code-group

```bash [pnpm]
pnpm add @yamada-ui/react
```

```bash [npm]
npm install @yamada-ui/react
```

```bash [yarn]
yarn add @yamada-ui/react
```

```bash [bun]
bun add @yamada-ui/react
```

:::

#### プロバイダーを追加する

インストール後、アプリケーションのルートに`UIProvider`を追加します。

```tsx {1,5,7}
import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  )
}
```

#### コンポーネントを使用する

`UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。

```tsx {1,4}
import { Button } from "@yamada-ui/react"

const App = () => {
  return <Button>Click me</Button>
}
```

これで、Yamada UIのセットアップは完了です！

::::
